import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Transform配置说明"),
      ),
      body: HomeScreen(),
    ),
  ));
}

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  double _transformValue = 0;
  String _radioValue;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Expanded(
              child: Center(
            child: DecoratedBox(
              position: DecorationPosition.background,
              decoration: BoxDecoration(boxShadow: <BoxShadow>[
                BoxShadow(color: Colors.green, blurRadius: 10, spreadRadius: 10)
              ], shape: BoxShape.rectangle),
              child: ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 200, maxWidth: 200),

                /**
                 * Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，所以无论对子widget应用何种变化，
                 * 其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的
                 */
                child: RotatedBox(quarterTurns: 1,child: Container(),)//RotatedBox绘制应用在布局阶段会影响其他widget布局,这是和Transform.rotate的区别


                /*Transform.translate(
                  offset: new Offset(50, 50),
                  child: Container(
                    color: Colors.pink,
                    width: 100,
                    height: 100,
                    child: Text("sdfasdfasdfasdfadsfasdf"),
                  ),
                )*/

                /*Transform.scale(scale: _transformValue,

                alignment: Alignment.topLeft,
                origin: Offset(50,50),

                child: Container(
                  color: Colors.pink,
                  width: 100,
                  height: 100,
                  child: Text("sdfasdfasdfasdfadsfasdf"),
                ),
                )*/

                /*Transform.rotate(//旋转
                    angle: _transformValue,
                    child: Container(
                      color: Colors.pink,
                      width: 100,
                      height: 100,
                      child: Text("sdfasdfasdfasdfadsfasdf"),
                    ))*/
                /*Transform(//
                  alignment: Alignment.topCenter,
                  transform: Matrix4.skew(_transformValue, _transformValue), //Matrix4.skewX(_transformValue), //倾斜y
                  child: Container(
                    color: Colors.pink,
                    width: 100,
                    height: 100,
                    child: Text("sdfasdfasdfasdfadsfasdf"),
                  ),
                )*/
                ,
              ),
            ),
          )),
          Column(
            children: <Widget>[
              FlatButton(
                child: Text("Transform ->$_radioValue"),
                onPressed: _showTransformDialog,
              )
            ],
          ),
          Slider(
              value: _transformValue, min: 0, max: 1, onChanged: _changeSlider)
        ],
      ),
    );
  }

  void _showTransformDialog() {
    Future<String> feature = showDialog<String>(
        context: context,
        barrierDismissible: true,
        builder: (context) {
          return StatefulBuilder(builder: (context, state) {
            return AlertDialog(
              title: Text("transform"),
              content: TransformDialogContent(radioValue: _radioValue),
            );
          });
        });
    feature.then((value) {
      print("then:$value");
      setState(() {
        _radioValue = value;
      });
    }).whenComplete(() {
      print("whencomplete");
    });
    print("feature->$feature");
  }

  void _changeSlider(double value) {
    setState(() {
      _transformValue = value;
    });
  }
}

class TransformDialogContent extends StatefulWidget {
  final String radioValue;

  TransformDialogContent({Key key, this.radioValue}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new TransformDialogState(radioValue);
  }
}

class TransformDialogState extends State<TransformDialogContent> {
  String _radioValue;

  TransformDialogState(this._radioValue);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ListBody(
        children: <Widget>[
          RadioListTile<String>(
              value: "skewX",
              groupValue: _radioValue,
              title: Text("SkewX"),
              onChanged: _changeRadio),
          RadioListTile<String>(
              value: "skewY",
              groupValue: _radioValue,
              title: Text("SkewY"),
              onChanged: _changeRadio),
          RadioListTile<String>(
              value: "scale",
              groupValue: _radioValue,
              title: Text("Scale"),
              onChanged: _changeRadio)
        ],
      ),
    );
  }

  void _changeRadio(String value) {
    setState(() {
      _radioValue = value;
    });
    Navigator.of(context).pop(value);
  }
}
